<template>
  <!--业务员详情-->
  <div class="detail">
    <mt-header fixed title="业务员详情">
      <router-link to="" slot="left">
        <mt-button icon="back" v-if="iosShow" @click="$router.go(-1)">返回</mt-button>
      </router-link>
      <!-- <mt-button icon="more" slot="right"></mt-button> -->
    </mt-header>
    <div class="detail_top">
      <img src="../../../static/image/head.png" class="back" />
      <div class="detail_name">{{ nickName }}</div>
      <div class="salesman">上线业务员：{{ directSuperior }}</div>
    </div>
    <div class="tabb">
      <div class="tabb_top">
        <div class="pay_class">
          <img src="../../../static/image/classgl.png" class="classgl" />
          <span>购课</span>
          <span>{{ paySource }}</span>
        </div>
        <div class="line"></div>
        <div class="pay_class">
          <img src="../../../static/image/list.png" class="list" />
          <span>开单</span>
          <span>{{ directCount }}</span>
        </div>
        <!-- <div class="line"></div>
      <div class="pay_class">
        <img src="../../../static/image/money.png" class="money"/>
        <span>收益</span>
        <div>￥31<span>万</span></div>
      </div> -->
        <div class="line"></div>
        <div class="pay_class">
          <img src="../../../static/image/usermoney.png" class="usermoney" />
          <span>佣金</span>
          <div>￥{{ directAmount }}<span></span></div>
        </div>
      </div>
    </div>
    <mt-navbar v-model="selected">
      <mt-tab-item id="1">购课</mt-tab-item>
      <mt-tab-item id="2">一级推广</mt-tab-item>
      <mt-tab-item id="3">二级推广</mt-tab-item>
    </mt-navbar>
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <div
          class="more_list"
          v-infinite-scroll="getCardListone"
          infinite-scroll-disabled="moreLoadingone"
          infinite-scroll-distance="0"
          infinite-scroll-immediate-check="false"
        >
          <div
            class="more_li"
            v-for="(item, index) in buyclassone"
            :key="index"
          >
            <span>{{ item.goodsName }}</span>
            <span>￥{{ item.amount / 100 }}</span>
          </div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <div
          class="more_list"
          v-infinite-scroll="getCardListtwo"
          infinite-scroll-disabled="moreLoadingtwo"
          infinite-scroll-distance="0"
          infinite-scroll-immediate-check="false"
        >
          <div
            class="more_li"
            v-for="(item, index) in buyclasstwo"
            :key="index"
          >
            <span>{{ item.goodsName }}</span>
            <span>￥{{ item.amount / 100 }}</span>
          </div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="3">
        <div
          class="more_list"
          v-infinite-scroll="getCardListthree"
          infinite-scroll-disabled="moreLoadingthree"
          infinite-scroll-distance="0"
          infinite-scroll-immediate-check="false"
        >
          <div
            class="more_li"
            v-for="(item, index) in buyclassthree"
            :key="index"
          >
            <span>{{ item.goodsName }}</span>
            <span>￥{{ item.amount / 100 }}</span>
          </div>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>
<script>
import axios from "axios";
import { Salesmandetail, Course } from "../../api/api";
import querystring from "query-string";
import { Navbar, TabItem, InfiniteScroll, Indicator, Toast,Header  } from "mint-ui";

export default {
  name: "Branchdetail",
  data() {
    return {
      nickName: "",
      directSuperior: "",
      paySource: "",
      directCount: "",
      directAmount: "",
      openId: "",
      buyclassone: [],
      selected: "1",
      buyclasstwo: [],
      buyclassthree: [],
      pageNoone: 2,
      pageNotwo: 2,
      pageNothree: 2,
      queryLoading: true,
      moreLoadingone: false,
      moreLoadingtwo: false,
      moreLoadingthree: false,
      allLoaded: false,
      iosShow:false
    };
  },
  created() {
    this.openId = this.$route.query.openId;
    console.log(this.openId);
    this.Phonetype();
  },
  methods: {
    //业务员详情
    Salesmandetail() {
      Indicator.open("加载中...");
      var params = {
        openId: this.openId
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      Salesmandetail(params, a).then(res => {
        console.log(res.data);
        if (res.data.code == 1) {
          this.nickName = res.data.data.nickName;
          this.directSuperior = res.data.data.directSuperior;
          this.paySource = res.data.data.paySource;
          this.directCount =
            res.data.data.directCount + res.data.data.indirectCount;
          this.directAmount =
            (res.data.data.directAmount + res.data.data.indirectAmount) / 100;
          Indicator.close();
        } else {
          Indicator.close();
          Toast(res.data.message);
        }
      });
    },
    //判断是安卓还是ios
        Phonetype(){
           let ua = navigator.userAgent;
           console.log(ua)
        //Android终端
            //let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1;  
           // console.log(isAndroid)
        　   //Ios终端
            let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 
            if(!isiOS){
              this.iosShow = true;
            }
        },
    //购课列表
    Courseone() {
      var params = {
        openId: this.openId,
        type: 1,
        pageNo: 1,
        pageSize: 10
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      Course(params, a).then(res => {
        console.log(res.data);
        if (res.data.code == 1) {
          this.buyclassone = res.data.data;
        } else {
          Toast(res.data.message);
        }
      });
    },
    Coursetwo() {
      var params = {
        openId: this.openId,
        type: 2,
        pageNo: 1,
        pageSize: 10
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      Course(params, a).then(res => {
        console.log(res.data);
        if (res.data.code == 1) {
          this.buyclasstwo = res.data.data;
        } else {
          Toast(res.data.message);
        }
      });
    },
    Coursethree() {
      var params = {
        openId: this.openId,
        type: 3,
        pageNo: 1,
        pageSize: 10
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      Course(params, a).then(res => {
        console.log(res.data);
        if (res.data.code == 1) {
          this.buyclassthree = res.data.data;
        } else {
          Toast(res.data.message);
        }
      });
    },
    //上拉加载
    getCardListone() {
      if (this.allLoaded) {
        this.moreLoadingone = true;
        return;
      }
      if (!this.queryLoading) {
        return;
      }
      this.moreLoadingone = true;
      var params = {
        openId: this.openId,
        type: 1,
        pageNo: this.pageNoone,
        pageSize: 10
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      Course(params, a).then(res => {
        console.log(res.data);
        if (res.data.code == 1) {
          if (res.data.data.length > 0) {
            this.pageNoone += res.data.data.length;
            res.data.data.forEach(element => {
              this.buyclassone.push(element);
            });
            this.moreLoadingone = false;
          } else {
            this.allLoaded = true;
            this.moreLoadingone = true;
            // Toast("没有更多数据");
          }
        } else {
          Toast(res.data.message);
        }
      });
    },
    //上拉加载two
    getCardListtwo() {
      if (this.allLoaded) {
        this.moreLoadingtwo = true;
        return;
      }
      if (!this.queryLoading) {
        return;
      }
      this.moreLoadingtwo = true;
      var params = {
        openId: this.openId,
        type: 1,
        pageNo: this.pageNotwo,
        pageSize: 10
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      Course(params, a).then(res => {
        console.log(res.data);
        if (res.data.code == 1) {
          if (res.data.data.length > 0) {
            this.pageNotwo += res.data.data.length;
            res.data.data.forEach(element => {
              this.buyclasstwo.push(element);
            });
            this.moreLoadingtwo = false;
          } else {
            this.allLoaded = true;
            this.moreLoadingtwo = true;
            // Toast("没有更多数据");
          }
        } else {
          Toast(res.data.message);
        }
      });
    },
    //上拉加载three
    getCardListthree() {
      if (this.allLoaded) {
        this.moreLoadingthree = true;
        return;
      }
      if (!this.queryLoading) {
        return;
      }
      this.moreLoadingthree = true;
      var params = {
        openId: this.openId,
        type: 1,
        pageNo: this.pageNothree,
        pageSize: 10
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      Course(params, a).then(res => {
        console.log(res.data);
        if (res.data.code == 1) {
          if (res.data.data.length > 0) {
            this.pageNothree += res.data.data.length;
            res.data.data.forEach(element => {
              this.buyclassthree.push(element);
            });
            this.moreLoadingthree = false;
          } else {
            this.allLoaded = true;
            this.moreLoadingthree = true;
            // Toast("没有更多数据");
          }
        } else {
          Toast(res.data.message);
        }
      });
    }
  },
  mounted() {
    this.Salesmandetail();
    this.Courseone();
    this.Coursetwo();
    this.Coursethree();
  }
};
</script>
<style lang="scss" scoped>
//min-ui样式
.mint-navbar .mint-tab-item.is-selected {
  color: #ffb400;
}
.mint-navbar {
  margin-top: 0.3rem;
}
.mint-navbar .mint-tab-item.is-selected {
  border-bottom: none;
}
.mint-header {
  background: #ffffff;
  color: #333333;
}
.detail {
  width: 100%;
  height: auto;
  padding-top: 40px;
}
.detail_top {
  width: 100%;
  height: 4.63rem;
  font-size: 0.28rem;
  position: relative;
  color: #ffffff;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}
.detail_top .back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4.63rem;
  z-index: -1;
}
.detail_top .detail_name {
  margin-left: 0.33rem;
  margin-top: 0.87rem;
  font-size: 0.34rem;
}
.detail_top .salesman {
  margin-top: 1.44rem;
  margin-right: 0.38rem;
  font-size: 0.3rem;
}
.tabb {
  width: 6.94rem;
  height: auto;
  margin-left: 0.28rem;
  background: #ffffff;
  border-radius: 0.1rem;
  box-shadow: 0px 0.03rem 0.36rem 0.18rem rgba(0, 0, 0, 0.05);
  margin-top: -2.37rem;
  font-size: 0.28rem;
  color: #212c67;
}
.tabb .tabb_top {
  width: 100%;
  height: 2.4rem;
  display: flex;
  align-items: center;
}
.tabb .pay_class img {
  margin-top: 0.45rem;
}
.tabb .pay_class {
  width: 1.7rem;
  height: 2.4rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tabb .pay_class span:nth-child(2) {
  font-size: 0.28rem;
  color: #212c67;
  margin-top: 0.15rem;
}
.tabb .pay_class span:nth-child(3) {
  font-size: 0.28rem;
  color: #ffb400;
  margin-top: 0.15rem;
}
.tabb .pay_class div:nth-child(3) {
  font-size: 0.28rem;
  color: #ffb400;
  margin-top: 0.15rem;
}
.tabb .pay_class div:nth-child(3) span {
  font-size: 0.18rem;
}
.tabb .line {
  width: 0.02rem;
  height: 0.88rem;
  background: #5f6780;
}
.tabb .pay_class .classgl {
  width: 0.43rem;
  height: 0.4rem;
}
.tabb .pay_class .list {
  width: 0.38rem;
  height: 0.4rem;
}
.tabb .pay_class .money {
  width: 0.34rem;
  height: 0.38rem;
}
.tabb .pay_class .usermoney {
  width: 0.38rem;
  height: 0.38rem;
}
.tab {
  float: left;
  text-align: center;
  height: 1rem;
  line-height: 1rem;
  font-size: 0.28rem;
  color: #212c67;
  width: 1.5rem;
}

.topTabSwiper {
  zoom: 1;
  display: flex;
  margin-top: 0.25rem;
}
.topTabSwiper:nth-child(1) {
  margin-left: 0.51rem;
  margin-right: 0.83rem;
}
.topTabSwiper:nth-child(2) {
  margin-right: 0.83rem;
}
.topTabSwiper:after {
  content: "";
  clear: both;
  display: block;
}

.tabBorer {
  color: #ffb400;
  font-size: 0.28rem;
  width: 1.5rem;
  text-align: center;
}

.swiper {
  width: 100%;
}

.swiper_con {
  width: 6.84rem;
  height: 100%;
  margin-left: 0.37rem;
}

.more_list {
  width: 6.84rem;
  height: auto;
  margin: auto;
}
.more_li {
  width: 6.84rem;
  height: 1.1rem;
  background: #ffffff;
  border: 0.02rem solid #cfcfcf;
  box-shadow: 0px 0.04rem 0.28rem 0px rgba(39, 52, 125, 0.05);
  border-radius: 0.16rem;
  margin-bottom: 0.22rem;
  font-size: 0.26rem;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.more_li span:nth-child(1) {
  margin-left: 0.32rem;
}
.more_li span:nth-child(2) {
  margin-right: 0.51rem;
}

.right-item {
  display: none;
}
.right-item.active {
  display: block;
}
</style>